<template>
  <div class="home">
    <carousel />
    <div class="hot">
    <h1>热 &nbsp; &nbsp; 销 &nbsp; &nbsp; 推 &nbsp; &nbsp;荐 </h1>
      <div class="hots">
        
        <div class="hotitem" v-for="(item,i) of products" :key="i">
          <router-link :to="`detail/${item.id}/${item.date}`">
          <div><img :src="item.image" alt=""></div>
          <p>{{item.title}}</p>
          <p>出发地：<i class="el-icon-location">{{item.place}}</i> </p>
          <p><!--描述-->{{item.description}}</p>
          <p>团期：{{item.date}}</p>
          <p>行程天数：{{item.jour}}天</p>
          <p>￥{{item.price}}<span>起</span><span>满意度：100%</span></p>
          </router-link>   
       </div>
      </div>
    </div>
    <div class="type">
        <div  class="types" :class="{select:i==select}" v-for="(item,i) of types" :key="i"  @click="typeclick(i,item.id)">{{item.category_name}}</div>
    </div>
    <div class="prods">
            <div class="proditem" v-for="(item,i) of fronts" :key="i">
              <div class="flip-container">
	              <div class="flipper">
		              <div class="front">
		              	<!-- 前面内容 -->
                    <div>
                      <img :src="item.image" alt="">
                    </div>
                    <div>
                    <p>{{item.title}}</p>
                    <p>￥{{item.price}}<span>起</span><span>满意度：100%</span></p>
                    </div>  
		              </div>
		              <div class="back">
			            <!-- 背面内容 -->
                    <div><router-link :to="`detail/${item.id}/${item.date}`">查看详情</router-link></div>
	              	</div>
	              </div>
              </div>
            </div>
      </div>
    
  </div>
</template>

<script>
// @ is an alias to /src
import carousel from '../components/Carousel.vue'
export default {
  name: 'Home',
  components: {
    carousel
  },
  data(){
    return{
      products:{},
      fronts:{},
      types:[],
      select:0
    }
  },
  methods:{
    loadArticles(cid='1',page=1,cd){
       this.axios.get("travel",{params:{cid:cid,page:page}}).then(result=>{
        //  console.log(result.data.results)
        result.data.results.forEach(item=>{
          if(item.image){
            item.image=require(`../assets/house/${item.image}`);
          }
        })
        cd(result);
      })
    },

    typeclick(i,cid){
      this.select=i;
      
      this.loadArticles(cid,1,(result)=>{
        this.fronts=result.data.results; 
      })
    }
  },
  mounted(){
    document.documentElement.scrollTop=0;
    this.axios.get("category").then(result=>{
      this.types=result.data.results
    })
    this.loadArticles(1,1,result=>{
      this.products=result.data.results;
      this.fronts=result.data.results;
    })
  }
}
</script>
<style scoped>
  .home h1{
    font-size: 35px;
    margin-top: 60px;
    margin-bottom: 60px;
    text-align: center;
  }
  .home  p{
    padding:5px 0;
    font-size: 15px;
    color: #999;
    overflow: hidden;
    white-space: nowrap;
    text-overflow:ellipsis;
  }
  /*热度推荐*/
  .home .hots{
    margin: 0 auto;
    width: 75%;
    flex-wrap:wrap;
    display: flex;
    justify-content: center;
  }
  .home .hotitem{
    margin: 30px; 
    width: 285px;
    cursor: pointer;
    transition: all 0.2s ease;
  }
  .home .hotitem:hover{
    transform: translateY(-15px);
    box-shadow: 0px 0px 25px black;
    border-radius: 3%;
  }
  .home .hotitem div{
    overflow: hidden;
    width: 285px;
    height: 226px;
  }
  .home .hotitem img{
    width: 100%;
    height: 100%;
    transition: all .4s ease;
    border-radius: 3%; 
  }
  .home .hotitem img:hover{
    width: 120%;
    height: 120%;
  }
  .home .hotitem p:nth-child(2){
    color: black;
    font-size: 18px;
    line-height:25px;
  }  
  .home .hotitem p:nth-child(3)>i{
    color: #31c27c;
  }
  .home .hotitem p:last-child{
    color: tomato;
    font-size: 25px;
    margin-left: 5px;
    position: relative;
  }
  .home .hotitem p:last-child>span{
    font-size: 12px;
  }
  .home .hotitem p:last-child>span:last-child{
    position: absolute;
    right: 5px;
    bottom: 5px;
    color: #999;
  }
  /*分类*/
  .home .type{
    margin-top: 6%;
    text-align: center;
    font-size: 25px;
    margin-bottom: 3%; 
  }
  .home .types{
    display: inline-block;
    padding-bottom: 5px;
    
    transition: color 1s ease
  }
  .home .types + .types{
    margin-left: 25px;
  }
  .home .types:hover{
    color: #31c27c;
    cursor: pointer; 
  }
  .home .select{
    color: #31c27c;
    border-bottom:2px solid #31c27c;
  }
  /*产品*/
  .home .front{
    width: 285px;
    z-index: 1;
    backface-visibility: hidden;
  }
  .home .front>div:first-child{
    width: 285px;
    height: 226px;
  }
  .home .front>div:first-child img{
    width: 100%;
    height: 100%;
    border-radius: 3%;
  }
  .home .prods{
    margin: 0 auto;
    width: 75%;
    flex-wrap:wrap;
    display: flex;
    justify-content: center;
  }
  .home .proditem{
    margin: 30px; 
    cursor: pointer;
  }
  .home .front p:first-child{
    color: black;
    font-size: 18px;
    line-height:25px;
  }
  .home .front p:last-child{
    color: tomato;
    font-size: 25px;
    margin-left: 5px;
    position: relative;
  }
  .home .front p:last-child>span{
    font-size: 12px;
  }
  .home .front p:last-child>span:last-child{
    position: absolute;
    right: 0;
    bottom: 0;
    color: #999;
  }
  /*翻转效果*/
  .home .flip-container {
	perspective: 1000;
  }
  .home .flip-container:hover .flipper{
		transform: rotateY(-180deg);
	}
  .home .flipper {
	transition: 0.8s;
	transform-style: preserve-3d;
	position: relative;
  }
  .home .front, .back {
	position: absolute;
	top: 0;
	left: 0;
  }
  .home .back {
	transform: rotateY(-180deg);
  backface-visibility: hidden;
  }
  .home .back>div{
    width: 100%;
    height: 100%;
    background: floralwhite;
    text-align: center;
    line-height:  250px;
  }
  .home .flip-container, .front, .back {
	width: 285px;
	height: 296px;
 }
  .home .back a{
    background: #31c27c;
    border: #999;
    padding: 15px 23px;
    border-radius: 8%;
    color: #fff;
  }
</style>
